<template>
  switch parent border: <el-switch v-model="parentBorder" /> switch child
  border: <el-switch v-model="childBorder" />
  <el-table
    :data="tableData"
    :border="parentBorder"
    style="width: 100%"
    @cell-dblclick="handlercell"
  >
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <h3>Family</h3>

          <el-table @cell-click="handlercell"  v-if="props.row.fossil_list.length!=0" :data="props.row.fossil_list" :border="childBorder">
<!--            <el-table-column label="Name" prop="name">-->
<!--                   <template #default="scope">-->
<!--                     <el-input v-model='scope.row.name'/>-->
<!--                   </template>-->
<!--            </el-table-column>-->
                <el-table-column v-for="column in Object.keys(props.row.fossil_list[0])" :label="column" :prop="column">
                  <template #default="scope">
                    <el-input v-if="isactive==scope.column.id" v-model="scope.row[column]"></el-input>
                  </template>
                </el-table-column>

          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column v-for="column in columns" :label="column" :prop="column" >
       <template #default="scope">
           <el-input v-if="isactive==scope.column.id" v-model="scope.row[column]"></el-input>
       </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const parentBorder = ref(false)
const childBorder = ref(false)
const tableData = ref([])
const res= require('.././data/stage.json')
tableData.value=res.data.results
console.log(tableData);
const columns = Object.keys(tableData.value[0]).filter(item=>item!='fossil_list')
const isactive = ref()
const handlercell=(row: any, column: any, cell: HTMLTableCellElement, event: Event)=>{
     isactive.value = column.id
     console.log(row);

}
console.log(columns);
const content = ref(tableData.value)
// console.log(content);
</script>
